<template>
  <div class="excel-demo">
    <a-card title="Excel模板设计器演示" :bordered="false">
      <!-- 功能介绍 -->
      <div class="demo-section">
        <h3>功能特点</h3>
        <a-list>
          <a-list-item>
            <a-list-item-meta
              title="可视化设计"
              description="通过拖拽和点击的方式设计Excel表格模板，无需编写代码"
            />
          </a-list-item>
          <a-list-item>
            <a-list-item-meta
              title="实时预览"
              description="所见即所得的编辑体验，实时查看表格效果"
            />
          </a-list-item>
          <a-list-item>
            <a-list-item-meta
              title="模板管理"
              description="支持保存、加载、删除模板，方便重复使用"
            />
          </a-list-item>
          <a-list-item>
            <a-list-item-meta
              title="Excel导出"
              description="一键导出为标准Excel文件，支持.xlsx格式"
            />
          </a-list-item>
          <a-list-item>
            <a-list-item-meta
              title="灵活配置"
              description="支持动态添加/删除行列，自定义表头和内容"
            />
          </a-list-item>
        </a-list>
      </div>

      <!-- 使用步骤 -->
      <div class="demo-section">
        <h3>使用步骤</h3>
        <a-steps direction="vertical" :current="-1">
          <a-step title="设计表格结构">
            <div class="step-content">
              <p>1. 设置表格名称</p>
              <p>2. 调整行数和列数</p>
              <p>3. 编辑列标题</p>
            </div>
          </a-step>
          <a-step title="填充表格内容">
            <div class="step-content">
              <p>1. 点击单元格输入内容</p>
              <p>2. 使用工具栏添加/删除行列</p>
              <p>3. 选择行列进行批量操作</p>
            </div>
          </a-step>
          <a-step title="保存和导出">
            <div class="step-content">
              <p>1. 保存模板以便后续使用</p>
              <p>2. 导出为Excel文件</p>
              <p>3. 加载已保存的模板</p>
            </div>
          </a-step>
        </a-steps>
      </div>

      <!-- 示例模板 -->
      <div class="demo-section">
        <h3>示例模板</h3>
        <a-space>
          <a-button type="primary" @click="loadSampleTemplate('employee')">
            员工信息表
          </a-button>
          <a-button @click="loadSampleTemplate('sales')">
            销售报表
          </a-button>
          <a-button @click="loadSampleTemplate('inventory')">
            库存清单
          </a-button>
          <a-button @click="loadSampleTemplate('financial')">
            财务报表
          </a-button>
        </a-space>
      </div>

      <!-- 操作按钮 -->
      <div class="demo-actions">
        <a-space size="large">
          <a-button type="primary" size="large" @click="goToDesigner">
            <template #icon>
              <icon-edit />
            </template>
            开始设计
          </a-button>
          <a-button size="large" @click="viewDocumentation">
            <template #icon>
              <icon-book />
            </template>
            查看文档
          </a-button>
        </a-space>
      </div>

      <!-- 预览模态框 -->
      <a-modal
        v-model:visible="previewVisible"
        :title="`${selectedTemplate}模板预览`"
        :width="800"
        :footer="false"
      >
        <div class="template-preview">
          <a-table
            :columns="previewColumns"
            :data="previewData"
            :pagination="false"
            bordered
            size="small"
          />
          <div class="preview-actions">
            <a-space>
              <a-button type="primary" @click="useTemplate">
                使用此模板
              </a-button>
              <a-button @click="previewVisible = false">
                关闭预览
              </a-button>
            </a-space>
          </div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { IconEdit, IconBook } from '@arco-design/web-vue/es/icon'

const router = useRouter()
const previewVisible = ref(false)
const selectedTemplate = ref('')
const previewColumns = ref([])
const previewData = ref([])

// 示例模板数据
const sampleTemplates = {
  employee: {
    name: '员工信息表',
    columns: [
      { title: '员工编号', dataIndex: 'A' },
      { title: '姓名', dataIndex: 'B' },
      { title: '部门', dataIndex: 'C' },
      { title: '职位', dataIndex: 'D' },
      { title: '入职日期', dataIndex: 'E' },
      { title: '联系电话', dataIndex: 'F' }
    ],
    data: [
      { key: 0, A: 'E001', B: '张三', C: '技术部', D: '前端工程师', E: '2023-01-15', F: '13800138001' },
      { key: 1, A: 'E002', B: '李四', C: '产品部', D: '产品经理', E: '2023-02-20', F: '13800138002' },
      { key: 2, A: 'E003', B: '王五', C: '设计部', D: 'UI设计师', E: '2023-03-10', F: '13800138003' }
    ]
  },
  sales: {
    name: '销售报表',
    columns: [
      { title: '日期', dataIndex: 'A' },
      { title: '产品名称', dataIndex: 'B' },
      { title: '销售数量', dataIndex: 'C' },
      { title: '单价', dataIndex: 'D' },
      { title: '销售金额', dataIndex: 'E' },
      { title: '销售员', dataIndex: 'F' }
    ],
    data: [
      { key: 0, A: '2024-01-01', B: '产品A', C: '100', D: '50.00', E: '5000.00', F: '张销售' },
      { key: 1, A: '2024-01-02', B: '产品B', C: '80', D: '75.00', E: '6000.00', F: '李销售' },
      { key: 2, A: '2024-01-03', B: '产品C', C: '120', D: '30.00', E: '3600.00', F: '王销售' }
    ]
  },
  inventory: {
    name: '库存清单',
    columns: [
      { title: '商品编码', dataIndex: 'A' },
      { title: '商品名称', dataIndex: 'B' },
      { title: '规格型号', dataIndex: 'C' },
      { title: '当前库存', dataIndex: 'D' },
      { title: '安全库存', dataIndex: 'E' },
      { title: '库存状态', dataIndex: 'F' }
    ],
    data: [
      { key: 0, A: 'P001', B: '笔记本电脑', C: 'ThinkPad X1', D: '50', E: '20', F: '正常' },
      { key: 1, A: 'P002', B: '无线鼠标', C: 'M705', D: '15', E: '30', F: '库存不足' },
      { key: 2, A: 'P003', B: '机械键盘', C: 'K380', D: '80', E: '25', F: '正常' }
    ]
  },
  financial: {
    name: '财务报表',
    columns: [
      { title: '科目', dataIndex: 'A' },
      { title: '期初余额', dataIndex: 'B' },
      { title: '本期借方', dataIndex: 'C' },
      { title: '本期贷方', dataIndex: 'D' },
      { title: '期末余额', dataIndex: 'E' }
    ],
    data: [
      { key: 0, A: '现金', B: '10000.00', C: '5000.00', D: '3000.00', E: '12000.00' },
      { key: 1, A: '银行存款', B: '50000.00', C: '20000.00', D: '15000.00', E: '55000.00' },
      { key: 2, A: '应收账款', B: '8000.00', C: '12000.00', D: '10000.00', E: '10000.00' }
    ]
  }
}

// 加载示例模板
const loadSampleTemplate = (templateKey) => {
  const template = sampleTemplates[templateKey]
  if (template) {
    selectedTemplate.value = template.name
    previewColumns.value = template.columns
    previewData.value = template.data
    previewVisible.value = true
  }
}

// 使用模板
const useTemplate = () => {
  const template = sampleTemplates[Object.keys(sampleTemplates).find(key => 
    sampleTemplates[key].name === selectedTemplate.value
  )]
  
  if (template) {
    // 将模板数据存储到sessionStorage，供设计器使用
    sessionStorage.setItem('selectedTemplate', JSON.stringify({
      templateName: template.name,
      columns: template.columns,
      data: template.data,
      rowCount: template.data.length,
      columnCount: template.columns.length
    }))
    
    // 跳转到设计器
    router.push('/excel/template-designer')
    Message.success(`已加载${template.name}模板`)
  }
  
  previewVisible.value = false
}

// 跳转到设计器
const goToDesigner = () => {
  router.push('/excel/template-designer')
}

// 查看文档
const viewDocumentation = () => {
  Message.info('文档功能开发中...')
}
</script>

<style scoped>
.excel-demo {
  padding: 16px;
}

.demo-section {
  margin-bottom: 32px;
}

.demo-section h3 {
  margin-bottom: 16px;
  color: #1d2129;
  font-size: 18px;
  font-weight: 600;
}

.step-content {
  margin-top: 8px;
}

.step-content p {
  margin: 4px 0;
  color: #4e5969;
}

.demo-actions {
  text-align: center;
  margin-top: 32px;
  padding: 24px;
  background: #f7f8fa;
  border-radius: 8px;
}

.template-preview {
  max-height: 500px;
  overflow: auto;
}

.preview-actions {
  margin-top: 16px;
  text-align: center;
}

:deep(.arco-list-item-meta-title) {
  color: #1d2129;
  font-weight: 500;
}

:deep(.arco-list-item-meta-description) {
  color: #4e5969;
}

:deep(.arco-steps-item-title) {
  color: #1d2129;
  font-weight: 500;
}
</style>